---
title: Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
---
{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/dialog?raw';

<LinkButton href='https://rn-primitives.vercel.app/dialog'>Dialog Primitive</LinkButton>
<LinkButton target='_blank' href='https://rnr-showcase.vercel.app/dialog'>
  Demo
</LinkButton>

<br />

A modal dialog that interrupts the user with important content and expects a response.

### Installation

<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add dialog
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type='tip' title='Dependencies'>
      Before copy/pasting, add the <a href='https://rn-primitives.vercel.app/dialog' className='text-white font-bold'> dialog primitive</a> to your project.
    </Aside>

    <br />

    **Copy/paste the following code to `~/components/ui/dialog.tsx`:**

    <Code code={importedCode} lang='tsx' title='~/components/ui/dialog.tsx' />
  </TabItem>
</Tabs>

### Usage

<Aside type="caution">

  Requires a `<PortalHost />` as the last child of your `<Root/>` (`app/_layout.tsx`) component

  ```tsx
  import { PortalHost } from '@rn-primitives/portal';

  function Root() {
    return (
      <>
        <Stack />
        {/* Default Portal Host (one per app) */}
        <PortalHost />
      </>
    );
  }
  ```

</Aside>

```tsx
import * as React from 'react';
import { Button } from '~/components/ui/button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '~/components/ui/dialog';
import { Text } from '~/components/ui/text';

function Example() {
  return (
      <Dialog>
        <DialogTrigger asChild>
          <Button variant='outline'>
            <Text>Edit Profile</Text>
          </Button>
        </DialogTrigger>
        <DialogContent className='sm:max-w-[425px]'>
          <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
              Make changes to your profile here. Click save when you're done.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose asChild>
              <Button>
                <Text>OK</Text>
              </Button>
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
  );
}
```

## Props

### Dialog

Extends [`View`](https://reactnative.dev/docs/view#props) props

|     Prop     |           Type           |     Note     |
| :----------: | :----------------------: | :----------: |
|   asChild    |         boolean          | _(optional)_ |
|     open     |         boolean          | _(optional)_ |
| onOpenChange | (value: boolean) => void | _(optional)_ |
| defaultOpen  |         boolean          | _(optional)_ |

### DialogTrigger

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### DialogOverlay

Extends [`View`](https://reactnative.dev/docs/view#props) props

|     Prop     |        Type        |     Note     |
| :----------: | :----------------: | :----------: |
|   asChild    |      boolean       | _(optional)_ |
|  forceMount  | true \| undefined; | _(optional)_ |
| closeOnPress |      boolean       | _(optional)_ |

### DialogPortal

|    Prop    |               Type               |         Note          |
| :--------: | :------------------------------: | :-------------------: |
| children\* |         React.ReactNode          |                       |
| forceMount |        true \| undefined         |     _(optional)_      |
|  hostName  |              string              | Web Only _(optional)_ |
| container  | HTMLElement \| null \| undefined | Web Only _(optional)_ |

### DialogContent

Extends [`View`](https://reactnative.dev/docs/view#props) props

|         Prop         |        Type         |         Note          |
| :------------------: | :-----------------: | :-------------------: |
|       asChild        |       boolean       |     _(optional)_      |
|      forceMount      |  true \| undefined  |     _(optional)_      |
|       alignOffset       |                    number                    | Native Only _(optional)_       |
|         insets          |                    Insets                    | Native Only _(optional)_       |
|     avoidCollisions     |                   boolean                    | Native Only _(optional)_       |
|          align          |         'start' \| 'center' \| 'end'         | Native Only _(optional)_       |
|          side           |              'top' \| 'bottom'               | Native Only _(optional)_       |
|       sideOffset        |                    number                    | Native Only _(optional)_       |
| disablePositioningStyle |                   boolean                    | Native Only _(optional)_ |
|   onOpenAutoFocus    | (ev: Event) => void | Web Only _(optional)_ |
|   onCloseAutoFocus   | (ev: Event) => void | Web Only _(optional)_ |
|   onEscapeKeyDown    | (ev: Event) => void | Web Only _(optional)_ |
|  onInteractOutside   | (ev: Event) => void | Web Only _(optional)_ |
| onPointerDownOutside | (ev: Event) => void | Web Only _(optional)_ |

### DialogHeader

Extends [`View`](https://reactnative.dev/docs/view#props) props

### DialogTitle

Extends [`Text`](https://reactnative.dev/docs/text#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### DialogDescription

Extends [`Text`](https://reactnative.dev/docs/text#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |

### DialogFooter

Extends [`View`](https://reactnative.dev/docs/view#props) props

### DialogClose

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

|  Prop   |  Type   |     Note     |
| :-----: | :-----: | :----------: |
| asChild | boolean | _(optional)_ |